package tools

const HtmlHeader = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文件共享</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
		a {
            text-decoration: none;
        }
        a:link, a:visited {
            color: black;
        }
        
        a:hover,a:active {
            color: #1890ff;
        }

        body {
            background-color: #f6f6f6;
            font-size: 14px;
            padding-bottom: 44px;
        }

        table {
            width: 100%;
            background-color: white;
			border-collapse:collapse;
        }
        .tool-bar {
			position:relative;
            height: 44px;
            line-height: 44px;
            color: white;
            background-color: #40485b;
        }

        tr {
            height: 32px;
			padding: 0 10px;
        }

        td {
            padding: 0 5px;
        }
        .hd {
            font-size: 12px;
        }
        .hd td {
            border-bottom: 1px dotted #f6f6f6;
        }
        
        .fileItem:hover {
            background-color: #f6f6f6;
        }

		.show-upload-btn {
			border:none;outline:none;background:transparent;color:white;font-size:20px;cursor:pointer;position:absolute;right:20px;top:10px;
		}
		.fileInput {display:none}
    </style>
</head>
<body>
    <table>
		<tr class="tool-bar"">
			<td colspan="4">
				<a href="/" style="color:white">首页</a>﹥<a href="javascript:window.history.back()" style="color:white">返回</a>
				<button class="show-upload-btn" onclick="showUpload()">+</button>
			</td>
		</tr>
        <tr class="hd">
            <td>名称</td>
            <td>修改日期</td>
            <td>大小</td>
            <td>操作</td>
        </tr>`

const HtmlFooter1 = `<tr><td colspan="4"></td></tr></table><div style="position:fixed;width:100%;height:44px;bottom:0;text-align:center;font-size:12px;line-height:44px;background-color: #f6f6f6">&copy;`
const HtmlFooter2 = `</div>
<div class="pic-box" style="display: none; width:550px; margin-left: -275px;  position: fixed; left:50%; top:20px; background: white; padding: 10px; box-shadow: 0 0 5px 1px #ccc;">
    <div onclick="hideImage()" style="width:20px; height:20px; position:absolute; top:0; right:0; background:rgba(255, 255, 255, 0.5); line-height: 20px; text-align: center; text-decoration: none; font-size: 12px; border-radius: 10px; cursor: pointer">×</div>
    <img class="pic-item" width="100%" src="" alt="">
	<div class="pic-name" style="text-align:center; height:34px; line-height:34px; font-size:12px"></div>
</div>
<input type="file" multiple class="fileInput" onchange="uploadFiles()">
</body></html>`
const JsScript = `<script>
	function doActions(filePath) {
		if (!isImage(filePath)) {
			return
		}
		let picBox = document.querySelector(".pic-box")
        let picItem = document.querySelector(".pic-item")
		let picName = document.querySelector(".pic-name")
		picName.innerHTML = getFileName(filePath)
        picItem.src = filePath
        if (picBox.style.width > picItem.naturalWidth) {
            picBox.style.width = picItem.naturalWidth
            picBox.style.marginLeft = "" + picItem.naturalWidth * -0.5 + "px"
        }
        picBox.style.display = "block"
	}

	function hideImage() {
        let picBox = document.querySelector(".pic-box")
        picBox.style.display = "none"
    }

 	function isImage(filePath) {
        let idx = filePath.lastIndexOf(".")
        if (idx === -1) {
            return false
        }
        let extName = filePath.substring(idx+1).toLowerCase()
        return extName === "jpg"
            || extName === "jpeg"
            || extName === "png"
            || extName === "gif"
            || extName === "bmp"
            || extName === "webp"
            || extName === "jfif"
    }

	function getFileName(filePath) {
        let idx = filePath.lastIndexOf("/")
        if (idx === -1) {
            return filePath
        }
        return filePath.substring(idx+1)
    }

	function showUpload(filePath) {
		document.querySelector(".fileInput").click()
	}

    function uploadFiles() {
		// 没有选中文件不上传
		let upBtn = document.querySelector(".show-upload-btn")
        let fileInput = document.querySelector(".fileInput")
        if (fileInput.files.length === 0) {
            return
        }
		upBtn.disabled = true

        var files = fileInput.files
        var formData = new FormData()
        for (var i = 0; i < files.length; i++) {
            formData.append('files', files[i])
        }

		let path = window.location.pathname
        var xhr = new XMLHttpRequest()
        xhr.open('PUT', path, true)
        xhr.onload = function() {
            if (xhr.status === 200) {
                alert("上传完毕!")
            } else {
                alert('上传文件失败！')
            }
			window.location.href = path
        }
		xhr.onerror = function () {
        	alert("上传失败!")
			window.location.href = path
    	}

    	// 上传中的进度回调
    	xhr.upload.onprogress = function (event) {
			if (event.lengthComputable) {
				let complete = Math.floor((event.loaded / event.total) * 100)
				upBtn.innerHTML = "上传进度" + complete + "%"
			}
		}
        xhr.send(formData)
    }
</script>`
const HideUpload = `<script>document.querySelector(".show-upload-btn").style.display="none"</script>`
